<template>
  <div class="indicatorsCity">
    <div class="questions-other">
      <HistoGramLevel class="histogram" :histogramLevelData="histogramLevelData" />
    </div>
  </div>
</template>
   
<script>
import HistoGramLevel from "./homes.vue";
export default {
  components: {
    HistoGramLevel,
  },
  data() {
    return {
      // 水平柱状图
      histogramLevelData: {
        width: 100 + "%", //柱状图盒子宽度
        histogramBarHeight: "46.782vw",
        legend: {
          //标记属性
          data: ["已整改", "未整改"],
          orient: "horizontal", //标记排列显示
          top: 15, //标记位置
          left: 3 + "%", //标记位置
          icon: "roundRect",
          itemWidth: 10,
          itemHeight: 10,
        },
        grid: {
          //绘图区调整
          left: "2%",
          right: "5%",
          bottom: "5%",
          top: "5%",
          containLabel: true,
        },
        yAxis: {
          data: [
            "轮播图",
            "活动秒杀",
            "商品管理",
            "商品属性",
          ],
          axisLabel: {
            //坐标轴文字显示样式
            lineHeight: 18, //字体行高
          },

        },
        xAxis: {
          //x轴显示数值
          type: "value",
          splitNumber: 1,
          interval: 50,
          axisLabel: {},
        },
        series: [
          //柱状图数据
          {
            name: "已整改",
            type: "bar",
            stack: "total",//堆叠的属性配置，如果没有这个配置，柱状图将会水平并排显示
            data: [30,4,21,11],
            itemStyle: {
              //柱状图样式设置
              color: "pink",
            },
            label: {
              show: false,
            },
            // emphasis: {//鼠标移入是否展示当前的柱状图
            //   focus: "series",
            // },
            labelLine: { show: false }, //是否显示线条
          },
          {
            name: "未整改",
            type: "bar",
            stack: "total",//堆叠的属性配置
            data: [ 11, 14, 23, 16],
            itemStyle: {
              color: "teal", //柱状图颜色
            },
            label: {
              show: false,
            },
            labelLine: { show: false }, //是否显示线条
          },
        ],
      },

    };
  },
  mounted() {

  },
};
</script>
   
<style scoped></style>